import React from 'react';
import { Card, Form, Input, Button, Switch, message } from 'antd';

const Settings = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('表单提交的值：', values);
    message.success('设置保存成功！');
  };

  const initialValues = {
    siteName: '后台管理系统',
    siteDescription: '一个强大的后台管理系统',
    adminEmail: 'admin@example.com',
    enableRegistration: true,
    enableNotification: false
  };

  return (
    <Card title="系统设置">
      <Form
        form={form}
        layout="vertical"
        initialValues={initialValues}
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
      >
        <Form.Item
          label="网站名称"
          name="siteName"
          rules={[{ required: true, message: '请输入网站名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="网站描述"
          name="siteDescription"
          rules={[{ required: true, message: '请输入网站描述' }]}
        >
          <Input.TextArea rows={4} />
        </Form.Item>

        <Form.Item
          label="管理员邮箱"
          name="adminEmail"
          rules={[
            { required: true, message: '请输入管理员邮箱' },
            { type: 'email', message: '请输入有效的邮箱地址' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="开启用户注册"
          name="enableRegistration"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>

        <Form.Item
          label="开启系统通知"
          name="enableNotification"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存设置
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Settings;